<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <link rel="stylesheet" href="../assets/lib/layui/css/layui.css">
    <link rel="stylesheet" href="../assets/css/swiper.css">
</head>

<body>
    <div class="layui-card">
        <div class="layui-card-header">
            <h3>轮播图管理</h3>
            <button type="button" class="layui-btn layui-btn-normal" tagName="upload">上传图片</button>
        </div>
        <div class="layui-card-body">
            <table class="layui-table">
                <colgroup>
                    <col width="70">
                    <col width="300">
                    <col>
                    <col width="120">
                    <col width="120">
                </colgroup>
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>图片预览</th>
                        <th>图片路径</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody tagName="content"></tbody>
            </table>
        </div>
    </div>
    <input type="file" name="" id="" multiple style="display: none" tagName="file">
    <script src="../assets/lib/jquery.js"></script>
    <script src="../assets/lib/layui/layui.all.js"></script>
    <script src="../assets/js/common.js"></script>
    <script>
        //初始化表格
        initializeTable()

        //修改图片展示状态
        $('tbody[tagName="content"]').on('click', 'input[tagName="state"]', function () {
            let status = 2
            if ($(this).prop('checked')) {
                status = 1
            }
            $.ajax({
                type: 'PUT',
                url: '/admin/swipers/' + $(this).data('id'),
                data: {
                    status
                },
                success: res => {
                    layer.msg(res.message)
                    if (res.status === 0) {
                        initializeTable()
                    }
                }
            })
        })

        //删除图片
        $('tbody[tagName="content"]').on('click', 'button[tagName="del"]', function () {
            layer.confirm('确认删除?', {
                id: 'one'
            }, index => {
                $.ajax({
                    type: 'DELETE',
                    url: '/admin/swipers/' + $(this).data('id'),
                    success: res => {
                        layer.msg(res.message)
                        if (res.status === 0) {
                            initializeTable()
                        }
                    }
                })
                layer.close(index);
            })
        })

        //上传图片
        $('button[tagName="upload"]').on('click', function () {
            $('input[tagName="file"]').trigger('click')
        })
        $('input[tagName="file"]').on('change', function () {
            let fd = new FormData()
            for (let i = 0; i < this.files.length; i++) {
                fd.append('swipers', this.files[i])
            }
            $.ajax({
                type: 'POST',
                url: '/admin/swipers',
                data: fd,
                contentType: false,
                processData: false,
                success: res => {
                    layer.msg(res.message)
                    if (res.status === 0) {
                        initializeTable()
                    }
                }
            })
        })

        //函数：初始化表格
        function initializeTable() {
            $.ajax({
                type: 'GET',
                url: '/admin/swipers',
                success: (res) => {
                    if (res.status === 0) {
                        $('tbody[tagName="content"]').empty()
                        res.data.forEach(({
                            id,
                            swiperimg,
                            swiperstatus
                        }) => {
                            let value = ''
                            if (swiperstatus === 1) {
                                value = 'checked'
                            }
                            $('tbody[tagName="content"]').append(`
                                <tr>
                                    <td>${id}</td>
                                    <td><img src="${baseURL + '/uploads/' + swiperimg}" alt=""></td>
                                    <td>${swiperimg}</td>
                                    <td>
                                        <input type="checkbox" name="" tagName="state" data-id="${id}" ${value}>
                                    </td>
                                    <td>
                                        <button type="button" class="layui-btn layui-btn-danger layui-btn-sm" tagName="del" data-id="${id}">删除</button>
                                    </td>
                                </tr>
                            `)
                        })
                    }
                }
            })
        }
    </script>
</body>

</html>